<template>
  <div class="perPcList-container">
    <div class="perOffice">
      <div class="title">个人办公使用教程</div>
      <div class="step-group">
        <div v-for="(item, index) in list" :key="index" style="font-size: 0;">
          <div class="step-left" v-if="index % 2 == 0">
            <span class="step-icon-group">
              <span class="step-icon"></span>
            </span>
            <span class="step-line"></span>
            <span class="step-text" @click="$router.push({path:'/perOffice/imgOrText/perPcDetail',query:{id:item.id}})">{{ item.title }}</span>
          </div>
          <div class="step-right" v-else>
            <span class="step-icon-group">
              <span class="step-icon"></span>
            </span>
            <span class="step-line"></span>
            <span class="step-text" @click="$router.push({path:'/perOffice/imgOrText/perPcDetail',query:{id:item.id}})">{{ item.title }}</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list:[]
    };
  },
  created() {
    this.initAjaxMethod();
  },
  methods: {
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.SET_PEROFFICE_ADVISERTEACHERLIST, { id: this.id })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.list = Array.isArray(res.data)?res.data:[];
          }
        });
    },
  }
};
</script>

<style lang="less">
.perPcList-container {
  padding:0 0.2rem;
  .title{
      font-size:0.3rem;
      color:#333;
      padding:0.2rem 0;
  }
  .step-group{
        padding:0.3rem;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }
    .step-left,.step-right{
        width: 50%;
        position: relative;
        font-size: 0;
    }
    .step-left{
        padding:0.2rem 0.84rem 0.2rem 0;
        border-right:1px solid #888;
        text-align: right;
        height: 0.7rem;
        font-size: 0;
    }
    .step-left .step-icon-group{
        position: absolute;
        top:50%;
        right: 0;
        width: 0.24rem;
        height:0.24rem ;
        border-radius: 50%;
        border:1px solid #888;
        transform: translate(50%,-50%);
        background: #EFEFF4;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .step-left .step-icon-group .step-icon{
        width: 0.16rem;
        height: 0.16rem;
        background: #f7a39a;
        display: inline-block;
        border-radius: 50%;
    }
    .step-left .step-line{
        position: absolute;
        top:50%;
        right: 0;
        width: 0.8rem;
        height: 1px;
        background: #888;
        transform: translateY(-50%);
    }
    .step-left .step-text{
        font-size:0.28rem;
        color:#0d8ddb;
    }
    .step-right{
        padding:0.2rem 0 0.2rem 0.84rem;
        margin-left:49.7%;
        border-left:1px solid #888;
        height: 0.7rem;
    }
    .step-right .step-icon-group{
        position: absolute;
        top:50%;
        left: 0;
        width: 0.24rem;
        height:0.24rem ;
        border-radius: 50%;
        border:1px solid #888;
        transform: translate(-50%,-50%);
        z-index: 4;
        background: #EFEFF4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .step-right .step-icon-group .step-icon{
        width: 0.16rem;
        height: 0.16rem;
        background: #f7a39a;
        display: inline-block;
        border-radius: 50%;
    }
    .step-right .step-line{
        position: absolute;
        top:50%;
        left: 0;
        width: 0.8rem;
        height: 1px;
        background: #888;
        transform: translateY(-50%);
    }
    .step-right .step-text{
        font-size:0.28rem;
        color:#0d8ddb;
    }
}
</style>